<template>
  <div>
    <div>
      <van-nav-bar :border="false" class="title" title="市场数据">
        <template #left>
          <i
            @click="$router.push('/find')"
            class="iconfont icon-zuojiantou"
          ></i>
        </template>
      </van-nav-bar>
      <div>
        <van-dropdown-menu>
          <van-dropdown-item
            ref="show"
            @close="change"
            :title="value"
            v-model="value"
            :options="option"
          >
            <van-search v-model="searchValue" placeholder="请输入搜索关键词" />
            <van-index-bar sticky>
              <div v-for="item in arr" :key="item.title">
                <van-index-anchor class="anchor" :index="item.title">
                  {{ item.title }}
                </van-index-anchor>
                <van-cell
                  v-for="(item, index) in item.city"
                  :key="index"
                  :title="item"
                  @click="fn1(item)"
                />
              </div>
            </van-index-bar>
          </van-dropdown-item>
          <van-dropdown-item
            @close="change"
            v-model="value2"
            :options="option2"
          />
        </van-dropdown-menu>
      </div>
    </div>
    <div class="echart">
      <h3>工资收入</h3>
      <div ref="chart" class="chart3"></div>
    </div>
    <div class="echart">
      <h3>工作经验</h3>
      <div ref="chart2" class="chart3"></div>
    </div>
    <div class="echart">
      <h3>历史平均工资变化趋势</h3>
      <div ref="chart3" class="chart3"></div>
    </div>
    <div class="echart">
      <h3>就业形势</h3>
      <div ref="chart4" class="chart3"></div>
    </div>
  </div>
</template>

<script>
// 导入echarts
import * as echarts from 'echarts'
import { cityIndex, marketInfo } from '@/api/market'
export default {
  data () {
    return {
      searchValue: '',
      value: '北京',
      value2: 0,
      option: [],
      option2: [],
      arr: '',
      show: false,
      employmentNum: [],
      experienceSalary: [],
      percentSalary: [],
      yearSalary: [],
      yearData: [],
      salaryData: [],
      yearData4: [],
      salaryData4: [],
      salaryData2: [],
      yearData2: [],
      percentSalaryList: []

    };
  },
  methods: {
    fn1 (val) {
      this.value = val
      this.$refs.show.toggle(false);

    },
    async init () {
      const res = await cityIndex()
      this.arr = res.data
      for (const key in this.arr) {
        this.arr[key].city = this.arr[key].map(v => v[0])
        this.arr[key].title = key
        if (this.value === this.arr[key][0][0]) {
          this.option2 = this.arr[key][1][1].map(i => {
            return {
              text: i,
              value: i
            }
          })
          this.value2 = this.option2[0].value
        }
      }
      this.getDataInfo()
    },
    change () {
      // console.log(this.value)
      for (const key in this.arr) {
        // console.log(this.arr[key]);
        this.arr[key].forEach(v => {
          if (this.value === v[0]) {
            this.option2 = v[1].map(i => {
              return {
                text: i,
                value: i
              }
            })
            this.value2 = this.option2[0].value
          }
        })
      }
      this.getDataInfo()
    },
    setECharts () {
      const myChart = echarts.init(this.$refs.chart)
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.percentSalary
          }
        ]
      });
      const myChart2 = echarts.init(this.$refs.chart2)
      myChart2.setOption({
        xAxis: {
          type: 'category',
          data: this.yearData2
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.salaryData2,
            type: 'line'
          }
        ]
      });
      const myChart3 = echarts.init(this.$refs.chart3)
      myChart3.setOption({
        xAxis: {
          type: 'category',
          data: this.yearData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.salaryData,
            type: 'line'
          }
        ]
      });
      const myChart4 = echarts.init(this.$refs.chart4)
      myChart4.setOption({
        xAxis: {
          type: 'category',
          data: this.yearData4
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.salaryData4,
            type: 'line',
            smooth: true,
            areaStyle: {}
          }
        ]
      })
    },
    async getDataInfo () {
      this.salaryData2 = []
      this.yearData2 = [],
        this.yearData4 = [],
        this.salaryData4 = [],
        this.yearData = [],
        this.salaryData = []
      const res = await marketInfo({
        city: this.value,
        position: this.value2
      })
      // console.log(res);
      if (res.data) {
        this.employmentNum = res.data.employmentNum
        this.experienceSalary = res.data.experienceSalary
        this.percentSalary = res.data.percentSalary
        this.yearSalary = res.data.yearSalary
        this.yearSalary.map(v => {
          return this.salaryData.push(+v.salary)
        })
        this.yearSalary.map(v => {
          return this.yearData.push(v.year)
        })
        this.employmentNum.map(v => {
          return this.yearData4.push(v.date)
        })
        this.employmentNum.map(v => {
          return this.salaryData4.push(v.value)
        })
        this.experienceSalary.map(v => {
          return this.salaryData2.push(v.value)
        })
        this.experienceSalary.map(v => {
          return this.yearData2.push(v.info)
        })
        this.percentSalary.map(v => {
          return v['name'] = v.assetType
        })
        this.percentSalary.map(v => {
          return v['value'] = v.percent
        })
        this.setECharts()
      }
    }
  },
  mounted () {
    this.init()
  },

}
</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
}
::v-deep .van-dropdown-item__content {
  background-color: #f6f4f5 !important;
}
.echart {
  margin: 0px 15px;
  .chart3 {
    height: 300px;
    // width: 100vw;
  }
}
</style>
